<template>
  <div id="app" class="wrap clearfix">
    <div class="local-con clearfix">
      <div class="sideL">
        <div class="l-topic">
          <h1>超实用的长隆亲子游攻略，出发前必看</h1>
          <div class="sub-tit">
            <i class="i-zan"></i>
            51人体验过
            <span class="time" style="margin-left: 20px"><em>阅读 5</em></span>
            <span class="time">旅游攻略<em>2018-11-26 08:00:00</em></span>
          </div>
          <div class="user_list">
            <div class="clearfix">
              <div class="author">
                <a href="javascript:;" target="_blank"
                  ><img
                    src="../assets/images/wKgEaVy2nheAN9y5AAorszCM1vQ56.jpeg"
                    alt=""
                    width="90"
                    height="90"
                /></a>
              </div>
              <div class="info">
                <div class="in-t">
                  <a href="javascript:;" target="_blank"
                    ><span class="name">叩丁狼官方</span></a
                  >
                  <span class="more">6篇游记 429个粉丝</span>
                </div>
                <p>
                  人有欢乐，也有苦衷。所谓的完美，其实只是来源于我们的心灵。人生不能重新来过，每个人也不可能重复站在同一个路口。但请不要害怕选择，因为选择没有绝对的好与坏，每种选择都会为你带来一种不一样的感受和别样的精彩。
                </p>
              </div>
              <div class="contact user-home">
                <a href="javascript:;" target="_blank"
                  ><i></i>
                  <p>TA的窝</p>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div  class="l-topic">
            <div class="_j_content" v-html="detailobj.content">
            </div>
        </div>
        <div class="copyRight m_t_20">
          <p style="text-align: left">
            本文著作权归 骡窝窝 所有，任何形式转载请联系作者。©2019 骡窝窝自由行
            <a
              class="r-report"
              style="display: inline; float: right; color: rgb(153, 153, 153)"
              >举报</a
            >
          </p>
        </div>
        <div class="l-comment">
          <div class="clearfix com-form">
            <div class="img">
              <img src="../assets/images/wKgED1uqIreAU9QZAAAXHQMBZ74008.png" />
            </div>
            <div class="fm-tare user-log">
              <textarea id="content" class="_j_comment_content"></textarea>
              <button type="button" class="_j_save_comment">评论</button>
            </div>
          </div>
          <div id="strategyComment" class="com-box">
            <h2>评论（<span class="_comment_num">{{ detailobj.replynum}}</span>）</h2>
            <ul id="comments">
              <div style="float: right">
                <div style="float: left">
                  <span style="line-height: 30px">
                    共1页 / 0条&nbsp;&nbsp;&nbsp;</span
                  >
                </div>
                <div
                  id="pagination"
                  class="jq-pagination"
                  style="display: inline"
                >
                  <a
                    class="prev disabled"
                    href="javascript:void(0);"
                    jp-role="prev"
                    jp-data="0"
                    >上一页</a
                  ><a
                    href="javascript:void(0);"
                    jp-role="page"
                    jp-data="1"
                    class="active"
                    >1</a
                  ><a
                    class="next disabled"
                    href="javascript:void(0);"
                    jp-role="next"
                    jp-data="2"
                    >下一页</a
                  ><a
                    class="last disabled"
                    href="javascript:void(0);"
                    jp-role="last"
                    jp-data="1"
                    >尾页</a
                  >
                </div>
              </div>
            </ul>
          </div>
        </div>
      </div>
      <div class="sideR">
        <div class="side_inner _j_sticky_block">
          <div class="_j_other_column">
            <div class="bar-sar clearfix">
              <a href="javascript:;" title="评论" class="_j_goto_comment"
                ><i class="i01"></i><em class="replay_num">1</em></a
              >
              <div class="bs_collect">
                <a
                  href="javascript:void(0);"
                  title="收藏"
                  class="bs_btn btn-collect"
                  ><i class="collect_icon i02"></i>
                  <em class="favorite_num">1</em></a
                >
              </div>
              <div class="bs_share">
                <a href="javascript:;" title="分享" class="btn-share bs_btn"
                  ><i class="i03"></i><em>0</em></a
                >
              </div>
              <a href="javascript:;" title="顶" class="_j_support_btn"
                ><i class="i05"></i><em class="support_num">1</em></a
              >
            </div>
            <div class="bs_pop clearfix" style="display: none">
              <a
                title="分享到新浪微博"
                rel="nofollow"
                role="button"
                data-japp="sns_share"
                data-jappfedata=""
                data-key="wb"
                data-title="盘点 | 广州周边好玩的地方有哪些？"
                data-content="盘点 | 广州周边好玩的地方有哪些？"
                data-pic="http://b4-q.mafengwo.net/s13/M00/7F/2D/wKgEaVyLhXKABFf5AAI6AbEkm0o40.jpeg?imageView2%2F2%2Fw%2F640%2Fh%2F360%2Fq%2F90"
                data-url="http://www.mafengwo.cn/gonglve/ziyouxing/1775.html"
                class="sina"
              ></a>
              <a
                title="分享到QQ空间"
                rel="nofollow"
                role="button"
                data-japp="sns_share"
                data-jappfedata=""
                data-key="qz"
                data-title="盘点 | 广州周边好玩的地方有哪些？"
                data-content="盘点 | 广州周边好玩的地方有哪些？"
                data-pic="http://b4-q.mafengwo.net/s13/M00/7F/2D/wKgEaVyLhXKABFf5AAI6AbEkm0o40.jpeg?imageView2%2F2%2Fw%2F640%2Fh%2F360%2Fq%2F90"
                data-url="http://www.mafengwo.cn/gonglve/ziyouxing/1775.html"
                class="zone"
              ></a>
              <a
                title="分享到微信"
                rel="nofollow"
                role="button"
                data-japp="weixin_dialog_share"
                data-jappfedata=""
                data-wx_qr="http://www.mafengwo.cn/qrcode.php?text=https%3A%2F%2Fm.mafengwo.cn%2Fgonglve%2Fziyouxing%2F1775.html&amp;size=150&amp;eclevel=H&amp;logo=&amp;__stk__=d3c9fd1d23b028a45ec5b71a30324cb9_391fafc14c22754068d1543e8cfc5d04"
                data-detail="1775"
                class="weixin"
              ></a>
            </div>
          </div>
        </div>
        <div class="side-sales">
          <h3>本周热卖</h3>
          <ul>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgBEFs6E4yAPz00AAhnvJUJ1j8238.gif"
                /></span>
                <div
                  title="广州长隆野生动物世界门票    随买随用 ／广州长隆旅游度假区／一票通玩 ／ 快速出票快捷入园 ／ 含空中览车及小火车/亲子乐园/赠送电子导览／自然零距离／广州长隆野生动物园"
                  class="title"
                >
                  广州长隆野生动物世界门票 随买随用 ／广州...
                </div>
                <span class="price">¥260</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgED1wweM2AVCMFAAzr37WPWDI967.gif"
                /></span>
                <div
                  title="广州长隆欢乐世界门票   当天可买／广州长隆旅游度假区／快速出票快捷入园／收藏店铺送卷送攻略／广东番禺汉溪长隆/长隆成人票／情侣票／家庭票／双人票／儿童票"
                  class="title"
                >
                  广州长隆欢乐世界门票 当天可买／广州长隆旅...
                </div>
                <span class="price">¥187</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgED1wdwVmAVaZUADon6OL7_xw084.gif"
                /></span>
                <div
                  title="当天可订/广州长隆野生动物世界门票/长隆野生动物园/广州长隆旅游度假区/含缆车小火车/南北门均可取票（提前1天规则退）"
                  class="title"
                >
                  当天可订/广州长隆野生动物世界门票/长隆野生...
                </div>
                <span class="price">¥256</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgBEFrEdj-Ac-nXAAOvgGsSLJI85.jpeg"
                /></span>
                <div
                  title="广州长隆水上乐园门票 一票通玩（电子票／当地必玩／免预约／超级大喇叭/热浪谷/意想不到的水上乐园）"
                  class="title"
                >
                  广州长隆水上乐园门票 一票通玩（电子票／当地...
                </div>
                <span class="price">¥122</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgED1wk2LeAC2NJAAJQtab6Yqw67.jpeg"
                /></span>
                <div
                  title="寻味广州1日游（6人小团·探黄埔军校陈家祠·电车看广州塔+沙面·西关美食秘籍·本地人带玩）"
                  class="title"
                >
                  寻味广州1日游（6人小团·探黄埔军校陈家祠·...
                </div>
                <span class="price">¥288</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ApiStrategiesDetail } from "../request/api";
export default {
  data() {
    return {
      // 攻略详情
      detailobj: {},
    };
  },
  async created() {
    //攻略详情请求
    let res = await ApiStrategiesDetail(this.$route.query.id);
    //判断请求是否成功
    if (res.code !== 200) {
      alert("请求失败");
      return;
    }
    this.detailobj = res.data
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 1000px;
  margin: 0 auto;
}

.crumb {
  margin: 15px 0 20px;
  font-size: 14px;
  color: #333;
  line-height: 20px;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: #ff9d00;
  cursor: pointer;
}

a:hover {
  outline: 0;
  text-decoration: underline;
  color: #ff8a00;
}

.crumb a {
  color: #333;
}

.crumb em {
  color: #ff9d00;
  font-style: normal;
}

.local-con {
  margin-top: 20px;
}

.sideL {
  width: 680px;
  float: left;
}

.sideR {
  position: relative;
  width: 275px;
  float: right;
  padding-top: 5px;
}

.l-topic h1 {
  font-size: 30px;
  color: #333;
  line-height: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e5e5;
  word-wrap: break-word;
}

.l-topic p {
  font-size: 16px;
  color: #333;
  line-height: 26px;
}

.l-topic .sub-tit {
  color: #333;
  font-size: 14px;
  padding: 13px 0 0;
  margin-bottom: 35px;
  overflow: hidden;
}

.l-topic .sub-tit .time {
  float: right;
  margin-left: 20px;
  color: #999;
}

.l-topic .sub-tit .time em {
  font-style: normal;
  margin-left: 10px;
}

.l-topic .sub-tit .time {
  float: right;
  color: #999;
}

.user_list {
  padding: 16px 0 0 0;
  color: #333;
  border: 1px solid #e5e5e5;
  margin: 25px 0 35px;
  overflow: hidden;
}

.user_list .author {
  margin-left: 15px;
  _display: inline;
  width: 90px;
  height: 90px;
  float: left;
  border-radius: 50%;
  overflow: hidden;
}

.user_list .info {
  width: 440px;
  float: left;
  padding-left: 22px;
}

.user_list .in-t {
  color: #333;
  line-height: 20px;
}

.user_list .in-t .name {
  font-size: 16px;
}

.user_list .in-t .more {
  color: #666;
  font-size: 16px;
  margin-left: 10px;
}

.user_list .info p {
  font-size: 14px;
  line-height: 20px;
  height: 40px;
  overflow: hidden;
  margin: 6px 0 8px 0;
  color: #666;
  color: #333;
}

.user_list .contact {
  width: 110px;
  height: 96px;
  border-left: 1px solid #e5e5e5;
  float: left;
  text-align: center;
}

.user_list .contact i {
  width: 32px;
  height: 32px;
  background: url(../assets/images/list_sprites7.png) no-repeat 0 -61px;
  display: block;
  margin: 18px auto 0;
}

.user_list .contact p {
  font-size: 14px;
  padding: 12px 0;
  color: #333;
}

.sideR .side_inner {
  background-color: #fff;
}

.sideR .bar-sar {
  margin-bottom: 10px;
}

.sideR .bar-sar a {
  float: left;
  display: block;
  width: 68px;
  height: 70px;
  text-align: center;
  text-decoration: none;
  color: #333;
}

.sideR .bar-sar a i {
  display: block;
  width: 25px;
  height: 24px;
  margin: 0 auto 10px auto;
  background: url(../assets/images/list_sprites01.png?a=1) no-repeat;
}

.sideR .bar-sar a em {
  font-style: normal;
  font-size: 16px;
  color: #333;
}

.sideR .bar-sar a i.i01 {
  background-position: 0 0;
}

.sideR .bar-sar a i.i02 {
  background-position: -68px 0;
}

.sideR .bar-sar a i.i03 {
  background-position: -136px 0;
}

.sideR .bar-sar a i.i04 {
  background-position: -204px 0;
}

.sideR .bar-sar a i.i05 {
  background: url(../assets/images/icon_support.png) no-repeat;
  background-size: 100%;
}

.copyRight {
  width: 680px;
  padding-top: 45px;
  background: url(../assets/images/copyright.png) no-repeat center center;
  overflow: hidden;
}

.m_t_20 {
  margin-top: 20px;
}

.copyRight p {
  background-color: #fff;
  text-align: center;
  line-height: 20px;
  color: #d1d1d1;
  font-size: 12px;
}

.l-comment {
  margin-top: 85px;
}

.com-box {
  border-top: 1px solid #e5e5e5;
}

.com-form .img {
  overflow: hidden;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  float: left;
}

.com-form .fm-tare {
  float: right;
  width: 615px;
  position: relative;
}

.com-form .img img {
  width: 100%;
  display: block;
}

.com-form .fm-tare textarea {
  height: 55px;
  width: 585px;
  padding: 14px;
  border: 1px solid #e5e5e5;
  resize: none;
  outline: 0;
  border-radius: 5px;
  float: right;
  font-size: 14px;
  color: #666;
}

.com-form .user-log textarea {
  border: 1px solid #ffa200;
}

.com-form .fm-tare button {
  width: 114px;
  height: 30px;
  background: #efefef;
  border: 0;
  outline: 0;
  cursor: pointer;
  display: block;
  float: right;
  margin: 20px 0;
  border-radius: 5px;
  font-size: 16px;
  color: #999;
  text-align: center;
  padding: 0;
  line-height: 30px;
}

.com-form .user-log button {
  background: #ff9d00;
  color: #fff;
}

.com-box h2 {
  font-size: 24px;
  color: #333;
  font-weight: normal;
  line-height: 24px;
  margin: 36px 0;
}

.com-box ul li {
  border-bottom: 1px solid #e5e5e5;
  padding: 30px 0;
}

.com-box li .img {
  overflow: hidden;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  float: left;
}

.com-box li .img img {
  width: 100%;
  display: block;
}

.com-box li .info {
  float: left;
  margin-left: 16px;
  width: 615px;
  position: relative;
}

.com-box .info h3 {
  font-size: 18px;
  color: #333;
  font-weight: normal;
  line-height: 28px;
}

.com-box .info h4 {
  font-size: 12px;
  color: #999;
  font-weight: normal;
  line-height: 14px;
}

.com-box .info .com-cont {
  font-size: 14px;
  color: #666;
  line-height: 28px;
  margin-top: 8px;
}

.com-box .rep-del {
  position: absolute;
  right: 0;
  top: 20px;
}

.com-box .rep-del i {
  display: inline-block;
  width: 1px;
  background: #e5e5e5;
  height: 12px;
  margin: 0 14px;
  vertical-align: top;
}

.com-box .rep-del a {
  color: #333;
  font-size: 12px;
  line-height: 12px;
  text-decoration: none;
}

.com-box .rep-del a {
  color: #333;
  font-size: 12px;
  line-height: 12px;
  text-decoration: none;
}

.com-box .rep-del a {
  color: #333;
  font-size: 12px;
  line-height: 12px;
  text-decoration: none;
}

.com-box .rep-del .btn-comment-like:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  //   background: url(../assets/images/icon_like.png) no-repeat;
  background-size: 100%;
  vertical-align: text-bottom;
}

.hide {
  display: none;
}

.bs_pop {
  width: 132px;
  padding: 8px 10px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 10;
  display: none;
}

.bs_pop {
  top: 70px;
}

.bs_pop a {
  width: 36px;
  height: 36px;
  display: inline-block;
  margin: 0 12px 0 0;
  //   background: #d84c4c url(../assets/images/sprite_v33.png) -295px -569px
  //     no-repeat;
  line-height: 200px;
  overflow: hidden;
  float: left;
  border-radius: 5px;
}

.bs_pop a.zone {
  background-color: #3f8bc0;
  background-position: -331px -569px;
}

.bs_pop a.weixin {
  margin-right: 0;
  background-color: #73a64f;
  background-position: -367px -569px;
}

.side-sales {
  /* float: right; */
  width: 275px;
}

.side-sales h3 {
  font-size: 18px;
  margin: -3px 0 15px;
  font-weight: normal;
  color: #333;
  line-height: 24px;
}

.side-sales li {
  margin-bottom: 20px;
}

.side-sales li a {
  display: block;
  padding-left: 110px;
  height: 70px;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}

.side-sales .image {
  float: left;
  margin-left: -110px;
  width: 100px;
  height: 70px;
  overflow: hidden;
}

.side-sales .title {
  height: 40px;
  margin-bottom: 12px;
}

.side-sales .price {
  color: #ff9d00;
}

.side-sales li a:hover {
  text-decoration: none;
}

.side-sales li a:hover .title {
  color: #ff9d00;
}
.sideR .bar-sar a i.on-i02 {
  //   background: url(../assets/images/list_sprites02.png) no-repeat;
  background-position: -68px 0;
}

.f-block .p-section {
  font-size: 14px;
  line-height: 26px;
  margin: 13px 0 28px;
  word-break: break-all;
}
.f-block > img {
  margin: 10px 0;
  display: block;
}
img {
  border: 0;
  vertical-align: middle;
}
.f-block > img {
  margin: 10px 0;
  display: block;
}

.f-block img {
  max-width: 100%;
}
.f-block > img {
  margin: 10px 0;
  display: block;
}
.f-block img {
  max-width: 100%;
}

.tips-box {
  margin: 35px 0;
  border: 1px solid #ffe3b7;
  background-color: #fff5e5;
  padding: 15px 20px;
  line-height: 26px;
  color: #333;
  font-size: 14px;
}
.raiders {
  margin: 30px 0;
  position: relative;
}
.clearfix {
  *zoom: 1;
}
a {
  background-color: transparent;
  text-decoration: none;
  color: #ff9d00;
  cursor: pointer;
}
.raiders .img {
  width: 236px;
  height: 153px;
  float: left;
  margin-right: 15px;
  overflow: hidden;
  position: relative;
  z-index: 7;
}
body,
p,
div {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
}

div {
  display: block;
}
.raiders .img img {
  width: 100%;
}

img {
  border: 0;
  vertical-align: middle;
}

.f-block img {
  max-width: 100%;
}

.view_poi_info p {
  color: #666;
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.product-box {
  margin: 35px 0;
  border: 1px solid #e5e5e5;
  padding: 9px;
}
.product-box .item:last-child {
  margin: 0;
}

.product-box .item {
  margin-bottom: 10px;
}
.product-box .item a {
  display: block;
  padding: 10px 72px 10px 10px;
  height: 90px;
  position: relative;
  color: #999;
}

.product-box .img {
  float: left;
  margin-right: 20px;
  width: 140px;
  overflow: hidden;
}
.product-box h3 {
  margin: 10px 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
  color: #666;
  height: 40px;
  overflow: hidden;
}

.product-box .p-arr {
  position: absolute;
  right: 18px;
  top: 40px;
  width: 12px;
  height: 22px;
  background: url(../assets/images/list_sprites7.png) no-repeat -140px -40px;
}

.com-box .rep-del .btn-comment-like:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  //   background: url(../assets/images/icon_like.png) no-repeat;
  background-size: 100%;
  vertical-align: text-bottom;
}

.com-box .rep-del .btn-comment-like.liked:after {
  //   background-image: url(../assets/images/icon_liked.png);
}
</style>
